<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/base.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/js/ajax.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
    <input type="hidden" id="id" name="id" value="${userinfo.id}">
    <div class="layui-form-item">
        <label class="layui-form-label" for="username"><span class="red">*</span>用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" id="username" placeholder="请填写用户名" class="layui-input"
                   value="${userinfo.username}"
                   lay-reqtext="请填写用户名"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="nickname"><span class="red">*</span>昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nickname" id="nickname" placeholder="请填写昵称" class="layui-input"
                   value="${userinfo.nickname}"
                   lay-reqtext="请填写昵称"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="phone"><span class="red">*</span>手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" id="phone" placeholder="请填写手机号" class="layui-input"
                   value="${userinfo.phone}"
                   lay-reqtext="请填写手机号"
                   lay-verify="required|phone">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="role"><span class="red">*</span>角色</label>
        <div class="layui-input-block">
            <select name="role" id="role" lay-reqtext="请选择角色"
                    lay-verify="required" lay-filter="role">
                <option value="">[选择角色]</option>
                <option value="1" disabled>管理员</option>
                <option value="2">负责人</option>
                <option value="3">打工人</option>
                <option value="4">司机</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="departmentDiv">
        <label class="layui-form-label" for="departmentId"><span class="red">*</span>部门</label>
        <div class="layui-input-block">
            <select name="departmentId" id="departmentId">
                <option value="">[选择部门]</option>
            </select>
        </div>
    </div>
    <div id="driverDiv" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label" for="driverAge"><span class="red">*</span>驾龄</label>
            <div class="layui-input-block">
                <input type="text" name="driverAge" id="driverAge" placeholder="请填写驾龄" class="layui-input"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="driverLevel"><span class="red">*</span>驾照等级</label>
            <div class="layui-input-block">
                <select name="driverLevel" id="driverLevel">
                    <option value="">[选择等级]</option>
                    <option value="1">A证</option>
                    <option value="2">B证</option>
                    <option value="3">C证</option>
                    <option value="4">D证</option>
                    <option value="5">E证</option>
                    <option value="6">F证</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="driverPhoto1"><span class="red">*</span>驾照正面</label>
            <input type="hidden" name="driverPhoto1" id="driverPhoto1">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" class="layui-btn layui-bg-orange" id="uploadDriverBtn1">上传驾照</button>
                    </div>
                    <div class="image-group" id="driverPhotoDiv1">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="driverPhoto2"><span class="red">*</span>驾照反面</label>
            <input type="hidden" name="driverPhoto2" id="driverPhoto2">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" class="layui-btn layui-bg-orange" id="uploadDriverBtn2">上传驾照</button>
                    </div>
                    <div class="image-group" id="driverPhotoDiv2">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" for="avatar"><span class="red">*</span>头像</label>
        <input type="hidden" name="avatar" id="avatar" lay-reqtext="请上传头像"
               lay-verify="required">
        <div class="layui-input-block">
            <div class="upload-group">
                <div class="upload-btn">
                    <button type="button" class="layui-btn layui-bg-orange" id="uploadBtn">上传头像</button>
                </div>
                <div class="image-group" id="avatarDiv">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>
        </div>
    </div>
</form>
</body>
<script>
    const {form, upload} = layui;
    let role = "${userinfo.role}";
    if (role) {
        $("#username").prop("readonly", true);
        $("#role").val(role);
        createAvatar("${userinfo.avatar}")
        if ("${userinfo.driver}") {
            $("#driverAge").val("${userinfo.driver.driverAge}");
            $("#driverLevel").val("${userinfo.driver.driverLevel}");
            createDriverPhoto1("${userinfo.driver.driverPhoto1}")
            createDriverPhoto2("${userinfo.driver.driverPhoto2}")
        }
        changeRole(role);
        form.render();
    }

    if ("${userinfo.id}" === "${loginInfo.id}") {
        $("#role").prop("disabled", true);
        $("#departmentId").prop("disabled", true);
        form.render();
    }
    $(function () {
        getCategoryList()
        form.on("submit(submitBtn)", function (data) {
            switch (data.field.role) {
                case "1":
                    break;
                case "2":
                case "3":
                    if (!data.field.departmentId) {
                        layer.msg('请选择部门！', {icon: 5});
                        return false;
                    }
                    break;
                case "4":
                    if (!data.field.driverAge) {
                        layer.msg('请填写驾龄！', {icon: 5});
                        return false;
                    }
                    if (!data.field.driverLevel) {
                        layer.msg('请选择驾照等级！', {icon: 5});
                        return false;
                    }
                    if (!data.field.driverPhoto1) {
                        layer.msg('请上传驾照正面！', {icon: 5});
                        return false;
                    }
                    if (!data.field.driverPhoto2) {
                        layer.msg('请上传驾照发面！', {icon: 5});
                        return false;
                    }
                    break;
                default:
                    layer.msg('角色异常！', {icon: 5});
                    return false;
            }

            ajax.post("userinfo/update", data.field).then(() => {
                layer.alert(`${data.field.id?"修改":"添加"}成功！`, {icon: 6}, function () {
                    closeWin();
                    parent.reloadTable();
                })
            })
            return false;
        })
        form.on("select(role)", function (data) {
            changeRole(data.value)
        })
        upload.render({
            elem: "#uploadBtn",
            url: "upload",
            data: {type: "avatar"},
            done(res) {
                if (res.code === 200) {
                    createAvatar(res.data)
                } else {
                    layer.msg('上传失败！', {icon: 5})
                }
            }
        });
        upload.render({
            elem: "#uploadDriverBtn1",
            url: "upload",
            data: {type: "driver"},
            done(res) {
                if (res.code === 200) {
                    createDriverPhoto1(res.data)
                } else {
                    layer.msg('上传失败！', {icon: 5})
                }
            }
        });
        upload.render({
            elem: "#uploadDriverBtn2",
            url: "upload",
            data: {type: "driver"},
            done(res) {
                if (res.code === 200) {
                    createDriverPhoto2(res.data)
                } else {
                    layer.msg('上传失败！', {icon: 5})
                }
            }
        });
    })

    function closeWin() {
        const index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    }

    function changeRole(role) {
        switch (role) {
            case '1':
                $("#departmentDiv").hide();
                $("#departmentId").val("");
                $("#driverDiv").hide();
                break;
            case '2':
            case '3':
                $("#departmentDiv").show();
                $("#driverDiv").hide();
                $("#driverDiv input,#driverDiv select").val("");
                $("#driverPhotoDiv1").empty();
                $("#driverPhotoDiv2").empty();
                break;
            case '4':
                $("#departmentDiv").hide();
                $("#departmentId").val("");
                $("#driverDiv").show();
                break;
            default:
                layer.msg("角色异常！", {icon: 5});
                break;
        }
    }

    function getCategoryList() {
        ajax.get('department/select').then(data => {
            const departmentList = data.data;
            let $html = '';
            departmentList.forEach(item => {
                $html += '<option ' + (item.status == 1 ? "" : "disabled") + ' value="' + item.id + '">' + item.name + '</option>';
            })
            $("#departmentId").append($html)
            const departmentId = "${userinfo.departmentId}";
            if (departmentId) {
                $("#departmentId").val(departmentId)
            }
            form.render();
        })
    }

    function createAvatar(src) {
        $("#avatar").val(src);
        $("#avatarDiv").empty().append('<div class="image-item"><div class="image-view"><img src="' + src + '" alt=""></div><div class="image-opt"><i class="layui-icon layui-icon-search" onclick="showImage(this)"></i></div></div>')
    }

    function createDriverPhoto1(src) {
        $("#driverPhoto1").val(src);
        $("#driverPhotoDiv1").empty().append('<div class="image-item"><div class="image-view"><img src="' + src + '" alt=""></div><div class="image-opt"><i class="layui-icon layui-icon-search" onclick="showImage(this)"></i></div></div>')
    }

    function createDriverPhoto2(src) {
        $("#driverPhoto2").val(src);
        $("#driverPhotoDiv2").empty().append('<div class="image-item"><div class="image-view"><img src="' + src + '" alt=""></div><div class="image-opt"><i class="layui-icon layui-icon-search" onclick="showImage(this)"></i></div></div>')
    }

    function showImage(_this) {
        const src = $(_this).parents(".image-item").find("img").prop("src");
        layer.photos({
            photos: {
                data: [{
                    src
                }]
            }
        })
    }
</script>
</html>

